<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <!-- <div class="searchBox">
          <div class="conditionBox">
            <Row>
              <Col :span="6">
                <FormItem label="展会名称：">
                  <Select
                    v-model="conditions.miceId"
                    clearable
                    @on-change="changeStatus($event, 'miceId')"
                  >
                    <Option
                      v-for="item in mices"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div> -->
      </Form>
      <div class="tableBtnBox">
        <Button icon="md-add" size="default" @click="addCategory">添加分类</Button>
      </div>
    </div>
    <Table :columns="columns1" border :height="tableHeight" :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="createTime">
        <span>{{row.createTime|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="tableBtn" @click="update(row)">
          <Icon size="18" type="ios-create-outline" />修改
        </span>
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Modal v-model="isAdd" :title="categoryId?'修改分类':'添加分类'" width="50%">
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline :label-width="130">
        <FormItem prop="categoryName" label="分类名">
          <Input type="text" v-model.trim="formInline.categoryName" placeholder="请输入分类名称"></Input>
        </FormItem>
        <FormItem label="展会名称：" prop="miceId">
          <Select v-model="formInline.miceId" clearable @on-change="checkStatus($event, 'miceId')">
            <Option v-for="item in mices" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="intro" label="分类简介">
          <Input
            type="textarea"
            v-model.trim="formInline.intro"
            :autosize="{minRows: 5,maxRows: 8}"
            placeholder="请输入分类简介"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="ok('formInline')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { miceList } from "../../api/exhibitors";
import { categoryList, addCategory, updateCategory } from "../../api/article";
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {
        miceId: ""
      },
      mices: [],
      columns1: [
        {
          title: "id",
          key: "categoryId",
          align: "center",
          minWidth: 200
        },
        {
          title: "categoryName",
          key: "categoryName",
          align: "center",
          minWidth: 150
        },
        {
          title: "文章数量",
          key: "articleCount",
          align: "center"
        },
        {
          title: "创建时间",
          slot: "createTime",
          align: "center",
          minWidth: 150
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          minWidth: 150
        }
      ],
      list: [],
      tableHeight: 100,
      isAdd: false,
      categoryId: "",
      formInline: {
        categoryName: "",
        intro: "",
        miceId: ""
      },
      ruleInline: {
        categoryName: [
          {
            required: true,
            message: "请输入分类名称",
            trigger: "blur"
          }
        ],
        miceId: [
          { required: true, message: "请选择展会名称", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getmiceList();
    this.getcategoryList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
    //展会列表
    getmiceList() {
      miceList({ page: 0, pageSize: 999999,type: 0}).then(res => {
        if (res.status) {
          console.log(res.data.list);
          this.mices = res.data.list.map(e => {
            return {
              value: e.miceId,
              label: e.miceName
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    //分类列表
    getcategoryList() {
      this.loading = true;
      const { page, pageSize } = this;
      categoryList(
        Object.assign(this.conditions, { page: page - 1, pageSize })
      ).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    //修改分类
    update(row) {
      this.categoryId = row.categoryId;
      this.formInline.categoryName = row.categoryName;
      this.formInline.miceId = row.miceId;
      this.formInline.intro = row.intro;
      this.isAdd = true;
    },
    //添加分类
    addCategory() {
      this.categoryId = "";
      this.formInline = {
        categoryName: "",
        intro: "",
        miceId: ""
      };
      this.isAdd = true;
    },
    checkStatus(e, name) {
      this.formInline[name] = e;
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.getcategoryList();
    },
    search() {
      this.getcategoryList();
    },
    handleReset() {
      this.conditions = {
        miceId: ""
      };
      this.page = 1;
      this.getcategoryList();
    },
    changePage(e) {
      this.page = e;
      this.getcategoryList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getcategoryList();
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        const { categoryName,intro,miceId } = this.formInline;
        if (valid) {
          if (this.categoryId == "") {
            addCategory({ categoryName,intro,miceId }).then(res => {
              if (res.status) {
                this.isAdd = false;
                this.getcategoryList();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            updateCategory({ categoryId: this.categoryId, categoryName,intro,miceId }).then(
              res => {
                if (res.status) {
                  this.isAdd = false;
                  this.getcategoryList();
                  this.$Message.success(res.msg);
                } else {
                  this.$Message.error(res.msg);
                }
              }
            );
          }
        } else {
        }
      });
    },
    cancel() {
      this.isAdd = false;
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
